<template>
  <div class="box">
    <div class="serach">
     
  <input  autocomplete="on" type="text" v-model="city" placeholder="☁请输入需要查询的城市" class="serach_input" @keyup.enter="serach" >
  <img src="../assets/find.jpg" alt="" class="shark"  @click = "serach">
    </div>
   <div>
      <h2 class="city_name">
      {{ city }}<span v-show="flag">最近七日天气状况如下</span>
    </h2>

   </div>
    <ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media" v-for="it in list " :key="it.id">
					<a href="javascript:;">
          
						<img class="mui-media-object mui-pull-left" src="../assets/upp.jpg">
						<div class="mui-media-body">

							{{ it.wea }}
              {{ it.win}}
							<p class='mui-ellipsis'> {{ it.tem2}}~{{ it.tem1 }} <span>{{ it.date }}</span><span>{{ it.day }}</span></p>
						</div>
					</a>
				</li>
				
			</ul>



  </div>
      
</template>

<script>
export default {
  data(){
    return{
      city:"",
      list:[],
      flag:false
      

      
    }
    },methods:{
      serach(){
        this.flag = true;
      var that = this;
      this.$axios.get('https://tianqiapi.com/api?version=v1&appid=54795289&appsecret=tiMLWt2U&city='+that.city).then(
        resonse =>{
          console.log(resonse.data.data  )  
          that.list = resonse.data.data    
          }
      ).catch(
        err => {

        }
      )
        
        }
        
  },
  }


</script>


<style scoped>
.box{
 
  background-color: rgb(227, 255, 255);

}

 .serach{
   display: flex;
   background-color: rgb(187, 185, 185);
   height: 40px;
   justify-content: space-between;
 }
    .serach_input{
      border-right: 0px solid red;

   width: 100%;
   
 }
 .shark{
   margin-top: 0.5px;
   width: 40px;
   height: 40px;
 }
 .mui-table-view{
   margin-top: 20px;
 }
.city_name{
  font-weight: 100;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}
ul{
  background-image: url(../assets/timg.gif);
  background-repeat: no-repeat;
  height: 100%;
 background-position:center;
}
.mui-ellipsis{
  display: flex;
  justify-content: space-around;
}
</style>